<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title> 记账助手 </title>
	<link rel="stylesheet" type="text/css" href="/resources/css/ext-all.css"/> 
	<script type="text/javascript" language="javascript" src="/js/AnyChart.js"></script> 
	<script type="text/javascript" language="javascript" src="/adapter/ext/ext-base.js"></script> 
	<script type="text/javascript" language="javascript" src="/js/ext-all.js"></script> 
	<script type="text/javascript" language="javascript" src="/js/woojs.js"></script> 
	<script type="text/javascript" language="javascript">
		var objLoginWindow = null;
		var objWindow = null;
		var objChartPanel = null;
		var objChartPanel2 = null;
		var objDataPanel = null;
		var objOperatorTabPanel = null;
		var objBillDataStore = null;
		var objCategoryDataStore = null;
		var objGridPanel = null;
		var chart1 = null;
		var chart2 = null;

		var objAddCategoryPanel = null;
		var txtFieldCategory = null;

		var objAddBillPanel = null;
		var dateFieldBillDate = null;
		var txtFieldAmount = null;
		var comboxCategory = null;
		var txtAreaRemark = null;

		var objSearchChat1Panel = null;
		var comboxChartSearchCategory = null;

		var objSearchChat2Panel = null;
		var dateFieldChart2SearchDate = null;

		var strAccount = '';

		function GetChart1Xml(arr)
		{
			var chart1_xml = new Array("<anychart><charts><chart plot_type=\"CategorizedVertical\" enable_animation=\"True\"><data>");
			if(arr.length > 0) chart1_xml.push("<series type=\"Spline\">");
			for(var i=0; i<arr.length; ++i)
			{
				chart1_xml.push("<point name=\"");
				chart1_xml.push(arr[i][0].toString().replace(/\"/gi, "\\\""));
				chart1_xml.push("\" y=\"");
				chart1_xml.push(arr[i][1].toString().replace(/\"/gi, "\\\""));
				chart1_xml.push("\"></point>");
			}
			if(arr.length > 0) chart1_xml.push("</series>");
			chart1_xml.push("</data><chart_settings><legend enabled=\"True\" ignore_auto_item=\"True\" position=\"right\" padding=\"20\"><font family=\"宋体\" size=\"12\"></font><title enabled=\"false\" /><items><item source=\"Points\"></item></items><format>{%Name} ￥{%Value}</format><columns_separator enabled=\"false\" /></legend><title enabled=\"true\"><text>消费趋势图</text></title><axes><y_axis><scale minimum=\"0\" /><title><text>金额(￥)</text><font family=\"宋体\" size=\"12\"></font></title></y_axis><x_axis><title><text>时间</text><font family=\"宋体\" size=\"12\"></font></title></x_axis></axes></chart_settings></chart></charts></anychart>");
			return chart1_xml.join("");
		}

		function GetChart2Xml(arr)
		{
			var chart2_xml = new Array("<anychart><charts><chart plot_type=\"Pie\" enable_animation=\"True\"><data>");
			if(arr.length > 0) chart2_xml.push("<series>");
			for(var i=0; i<arr.length; ++i)
			{
				chart2_xml.push("<point name=\"");
				chart2_xml.push(arr[i][0].toString().replace(/\"/gi, "\\\""));
				chart2_xml.push("\" y=\"");
				chart2_xml.push(arr[i][1].toString().replace(/\"/gi, "\\\""));
				chart2_xml.push("\"></point>");
			}
			if(arr.length > 0) chart2_xml.push("</series>");
			chart2_xml.push("</data><chart_settings><title enabled=\"True\"><font family=\"宋体\" size=\"12\"></font><text>消费分布比重</text></title><legend enabled=\"True\" ignore_auto_item=\"True\" position=\"Bottom\" padding=\"20\"><font family=\"宋体\" size=\"12\"></font><title enabled=\"False\" /><items><item source=\"Points\"></item></items><format>{%Icon} {%Name} ￥{%Value}</format><columns_separator enabled=\"false\" /></legend></chart_settings><data_plot_settings><pie_series sort=\"Desc\" explode_on_click=\"True\"><label_settings enabled=\"True\"><font color=\"White\" family=\"宋体\" size=\"12\"><effects><drop_shadow enabled=\"True\"/></effects></font><position anchor=\"Center\" valign=\"Center\" halign=\"Center\" padding=\"0\"/><format>{%YPercentOfSeries}{numDecimals:1}%</format></label_settings></pie_series></data_plot_settings></chart></charts></anychart>");
			return chart2_xml.join("");
		}

		var lib = new WooJS.Library();
		lib.OnLoadCompleted = function()
		{
			objCategoryDataStore.loadData(category_data);
			objBillDataStore.loadData(bill_data);
			chart1.setData(GetChart1Xml(chart1_data));
			chart2.setData(GetChart2Xml(chart2_data));
		};

		function InitChartPanel()
		{
			objChartPanel = new Ext.Panel({
				region: 'center',
				border: true,
				margins:'3px',
				html:'<div id="ChartContainer1"></div>'
			});

			objChartPanel2 = new Ext.Panel({
				region: 'east',
				width: 350,
				border: true,
				margins:'3px',
				html:'<div id="ChartContainer2"></div>'
			});
		}

		function InitAddCategoryPanel()
		{
			txtFieldCategory = new Ext.form.TextField({
					fieldLabel:'分类名称',
					width:200
				});
			objAddCategoryPanel = new Ext.form.FormPanel({
				title: '添加分类',
				labelWidth: 55,
				items:[txtFieldCategory],
				buttons:[
					new Ext.Button({
						text:'添加分类',
						handler:function(objBtn, eventObj) {
							var ajax = new WooJS.Ajax("/interface/addcategory.php", "user="+encodeURIComponent(strAccount)+"&category="+encodeURIComponent(txtFieldCategory.getValue()), function(val){
								var retObj = eval(val);
								if(retObj.ErrCode == 0)
								{
									category_data.push([retObj.Category.Id, retObj.Category.Name]);
									objCategoryDataStore.loadData(category_data);
									alert('添加成功！');
									txtFieldCategory.setValue('');
								}
								else
									alert(retObj.ErrMsg);
							});
							ajax.Send();
						}
					})
				]
			});
		}

		function InitAddBillPanel()
		{
			objCategoryDataStore = new Ext.data.ArrayStore({
					fields: [
					   {name: 'Id'},
					   {name: 'Category'}
					]
				});

			dateFieldBillDate = new Ext.form.DateField({
					format:'Y-m-d',
					fieldLabel: '消费日期',
					width:200
				});

			txtFieldAmount = new Ext.form.TextField({
					fieldLabel: '消费金额',
					width:200
				});
			
			comboxCategory = new Ext.form.ComboBox({
					fieldLabel: '分类',
					editable: false,
					width:200,
					maxHeight: 160,
					displayField:'Category',
					valueField:'Id',
					typeAhead: true,
					mode: 'local',
					triggerAction: 'all',
					selectOnFocus:true,
					emptyText:'请选择分类...',
					store: objCategoryDataStore
				});

			txtAreaRemark = new Ext.form.TextArea({
					fieldLabel: '备注',
					width:400,
					height:135
				});

			objAddBillPanel = new Ext.form.FormPanel({
				title:'添加账单',
				labelWidth: 55,
				items:[dateFieldBillDate, txtFieldAmount, comboxCategory, txtAreaRemark],
				buttons:[
					new Ext.Button({
						text:'添加账单',
						handler:function(objBtn, eventObj) {
							if(dateFieldBillDate.getRawValue() == '' ||
								txtFieldAmount.getValue() == '' ||
								comboxCategory.getValue() == '')
							{
								alert('您输入的数据不全！');
								return
							}

							var data = "user="+encodeURIComponent(strAccount)+"&date=" + encodeURIComponent(dateFieldBillDate.getRawValue()) + "&amount=" + encodeURIComponent(txtFieldAmount.getValue()) + "&category=" + encodeURIComponent(comboxCategory.getValue()) + "&remark=" + encodeURIComponent(txtAreaRemark.getValue());
							var ajax = new WooJS.Ajax("/interface/addbill.php", data, function(val){
								var retObj = eval(val);
								if(retObj.ErrCode == 0)
								{
									lib.Load('/interface/load.php?user=' + encodeURIComponent(strAccount));
								}
								else
									alert(retObj.ErrMsg);
							});
							ajax.Send();
						}
					})
				]
			});
		}

		function InitSearchChart1Panel()
		{
			comboxChartSearchCategory = new Ext.form.ComboBox({
					fieldLabel: '分类',
					editable: false,
					width:200,
					maxHeight: 160,
					displayField:'Category',
					valueField:'Id',
					typeAhead: true,
					mode: 'local',
					triggerAction: 'all',
					selectOnFocus:true,
					emptyText:'请选择分类...',
					store: objCategoryDataStore
				});

			objSearchChat1Panel = new Ext.form.FormPanel({
				title: '查询半年消费趋势',
				labelWidth: 55,
				items:[comboxChartSearchCategory],
				buttons:[
					new Ext.Button({
						text:'查询指定分类趋势',
						handler:function(objBtn, eventObj) {
							var ajax = new WooJS.Ajax("/interface/gettrend.php", "user="+encodeURIComponent(strAccount)+"&category="+encodeURIComponent(comboxChartSearchCategory.getValue()), function(val){
								var retObj = eval(val);
								if(retObj.ErrCode == 0)
								{
									chart1.setData(GetChart1Xml(retObj.xml));
								}
								else
									alert(retObj.ErrMsg);
							});
							ajax.Send();
						}
					}),
					new Ext.Button({
						text:'查询整体趋势',
						handler:function(objBtn, eventObj) {
							var ajax = new WooJS.Ajax("/interface/gettrend.php", "user="+encodeURIComponent(strAccount)+"&category=0", function(val){
								var retObj = eval(val);
								if(retObj.ErrCode == 0)
								{
									chart1.setData(GetChart1Xml(retObj.xml));
								}
								else
									alert(retObj.ErrMsg);
							});
							ajax.Send();
						}
					})
				]
			});
		}

		function InitSearchChart2Panel()
		{
			dateFieldChart2SearchDate = new Ext.form.DateField({
					format:'Y-m',
					fieldLabel: '查询月份',
					width:200
				});

			objSearchChat2Panel = new Ext.form.FormPanel({
				title: '查询消费记录',
				labelWidth: 55,
				items:[dateFieldChart2SearchDate],
				buttons:[
					new Ext.Button({
						text:'查询消费记录',
						handler:function(objBtn, eventObj) {
							if(dateFieldChart2SearchDate.getRawValue() == '')
							{
								alert('请选择查询月份!');
								return;
							}
							var ajax = new WooJS.Ajax("/interface/getbilldata.php", "user="+encodeURIComponent(strAccount)+"&date="+encodeURIComponent(dateFieldChart2SearchDate.getRawValue()), function(val){
								var retObj = eval(val);
								if(retObj.ErrCode == 0)
								{
									objBillDataStore.loadData(retObj.BillData);
									chart2.setData(GetChart2Xml(retObj.ChartXml));
								}
								else
									alert(retObj.ErrMsg);
							});
							ajax.Send();
						}
					}),
					new Ext.Button({
						text:'查询当月消费记录',
						handler:function(objBtn, eventObj) {
							lib.Load('/interface/load.php?user=' + encodeURIComponent(strAccount));
						}
					})
				]
			});
		}

		function InitOperatorPanel()
		{
			InitAddBillPanel();
			InitSearchChart1Panel();
			InitSearchChart2Panel();
			InitAddCategoryPanel();

			objOperatorTabPanel = new Ext.TabPanel({
				region: 'east',
				width: 500,
				frame:true,
				activeTab: 0,
				margins:'3px',
				padding:'5px',
				items:[objAddBillPanel, objSearchChat1Panel, objSearchChat2Panel, objAddCategoryPanel]
			});
		}

		function InitDataPanel()
		{
			objBillDataStore = new Ext.data.ArrayStore({
					fields: [
					   {name: 'BillId'},
					   {name: 'PayAmount', type:'float'},
					   {name: 'Category'},
					   {name: 'Remark'},
					   {name: 'CreateTime'}
					]
				});

			objGridPanel = new Ext.grid.GridPanel({
				store: objBillDataStore,
				region: 'center',
				stripeRows: true,
				margins:'3px',
				columns:[
					{id:'BillId',header: 'ID', width: 30, sortable: false, dataIndex: 'BillId'},
					{id:'CreateTime',header: '账单时间', width: 100, sortable: false, dataIndex: 'CreateTime'},
					{id:'PayAmount',header: '金额', width: 100, sortable: false, dataIndex: 'PayAmount', renderer: Ext.util.Format.numberRenderer("0.00")},
					{id:'Category',header: '分类', width: 100, sortable: false, dataIndex: 'Category'},
					{id:'Remark',header: '说明', width: 300, sortable: false, dataIndex: 'Remark'}
				]
			});

			InitOperatorPanel();

			objDataPanel = new Ext.Panel({
				region: 'south',
				height: 300,
				layout: 'border',
				border: false,
				items: [objGridPanel, objOperatorTabPanel]
			});
		}

		window.onresize = function()
		{
			if(objWindow) objWindow.setSize(document.documentElement.clientWidth - 50, document.documentElement.clientHeight - 50);
		}

		function OpenAccountWindow()
		{
			InitChartPanel();
			InitDataPanel();

			objWindow = new Ext.Window({
				title:'<span style="font-size:10pt;">记账助手</span>',
				closable:false,
				resizable:false,
				draggable:false,
				layout: 'border',
				width:document.documentElement.clientWidth - 50,
				height:document.documentElement.clientHeight - 50,
				items: [objChartPanel, objChartPanel2, objDataPanel]
			});
			objWindow.show();

			chart1 = new AnyChart('/swf/AnyChart.swf');
			chart1.width = WooJS.$('ChartContainer1').parentNode.clientWidth + 'px';
			chart1.height = WooJS.$('ChartContainer1').parentNode.clientHeight + 'px';
			chart1.write('ChartContainer1');

			chart2 = new AnyChart('/swf/AnyChart.swf');
			chart2.width = WooJS.$('ChartContainer2').parentNode.clientWidth + 'px';
			chart2.height = WooJS.$('ChartContainer2').parentNode.clientHeight + 'px';
			chart2.write('ChartContainer2');

			lib.Load('/interface/load.php?user=' + encodeURIComponent(strAccount));
		}

		var Page_OnLoad = function() {
			if(Ext.util.Cookies.get('account') && Ext.util.Cookies.get('account') != '')
			{
				strAccount = Ext.util.Cookies.get('account');
				OpenAccountWindow();
			}
			else
			{
				var txtFieldName = new Ext.form.TextField({
						fieldLabel: '用户名',
						width:200,
						labelStyle: 'text-align:right;'
					});

				var txtFieldPassword = new Ext.form.TextField({
						fieldLabel: '密码',
						width:200,
						labelStyle: 'text-align:right;',
						inputType:'password'
					});

				var objLoginPanel = new Ext.form.FormPanel({
					border:false,
					region:'center',
					labelWidth: 50,
					padding:'10px',
					items:[txtFieldName, txtFieldPassword]
					});

				var btnLogin = new Ext.Button({
						text:'登陆',
						handler:function(objBtn, eventObj) {
							if(txtFieldName.getValue() == '' ||
								txtFieldPassword.getValue() == '')
							{
								alert('请输入用户名、密码！');
								return;
							}

							objBtn.disable();
							btnCancel.disable();
							btnRegister.disable();

							var ajax = new WooJS.Ajax("/interface/login.php", "name="+encodeURIComponent(txtFieldName.getValue())+"&password="+encodeURIComponent(txtFieldPassword.getValue()), function(val){
								var retObj = eval(val);
								if(retObj.ErrCode == 0)
								{
									strAccount = txtFieldName.getValue();
									var time = new Date();
									time.setDate(time.getDate() + 1);
									Ext.util.Cookies.set('account', strAccount, time);
									objLoginWindow.hide();
									OpenAccountWindow();
								}
								else
								{
									alert(retObj.ErrMsg);
									objBtn.enable();
									btnCancel.enable();
									btnRegister.enable();
								}
							});
							ajax.Send();
						}
					});

				var btnCancel = new Ext.Button({
						text:'取消',
						handler:function(objBtn, eventObj) {
							window.close();
						}
					})

				var btnRegister = new Ext.Button({
						text:'注册',
						handler:function(objBtn, eventObj) {
							if(txtFieldName.getValue() == '' ||
								txtFieldPassword.getValue() == '')
							{
								alert('请输入用户名、密码！');
								return;
							}

							objBtn.disable();
							btnCancel.disable();
							btnLogin.disable();

							var ajax = new WooJS.Ajax("/interface/register.php", "user="+encodeURIComponent(txtFieldName.getValue())+"&pwd="+encodeURIComponent(txtFieldPassword.getValue()), function(val){
								var retObj = eval(val);
								if(retObj.ErrCode == 0)
								{
									strAccount = txtFieldName.getValue();
									var time = new Date();
									time.setDate(time.getDate() + 1);
									Ext.util.Cookies.set('account', strAccount, time);
									objLoginWindow.hide();
									OpenAccountWindow();
								}
								else
								{
									alert(retObj.ErrMsg);
									objBtn.enable();
									btnCancel.enable();
									btnLogin.enable();
								}
							});
							ajax.Send();
						}
					})

				objLoginWindow = new Ext.Window({
					title:'<span style="font-size:10pt;">记账助手</span>',
					closable:false,
					layout:'border',
					resizable:false,
					draggable:false,
					width:310,
					height:135,
					items: [objLoginPanel],
					buttonAlign: 'center',
					buttons:[btnLogin, btnCancel, btnRegister]
				});
				objLoginWindow.show();
			}
		};
		Ext.onReady(Page_OnLoad);
	</script>
</head>
<body style="background-color:#666666;"></body>
</html>